<template>
	<div class="default-main ba-table-box loading">
		<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

		<!-- 表格顶部菜单 -->
		<TableHeader
			:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
			quick-search-placeholder="快速搜索 用户名/姓名"
		>
		</TableHeader>
		<!-- 表格 -->
		<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
		<Table />

		<!-- 表单 -->
		<PopupForm />
	</div>
</template>

<script setup lang="ts">
import { provide, ref } from "vue"
import baTableClass from "/src/utils/baTable"
import PopupForm from "./popupForm.vue"
import Table from "/src/components/table/index.vue"
import TableHeader from "/src/components/table/header/index.vue"
import { defaultOptButtons } from "/src/components/table"
import { baTableApi } from "/src/api/common"
import { useAdminInfo } from "/src/stores/adminInfo"
import createAxios from "/src/utils/axios"

defineOptions({
	name: "system/user"
})

const isBh = ref("2")
const adminInfo = useAdminInfo()

const optButtons = defaultOptButtons(["edit", "delete"])
optButtons[1].display = (row) => {
	return row.id != adminInfo.id
}

const baTable = new baTableClass(
	new baTableApi("/admin_api/user/"),
	{
		column: [
			{ type: "selection", align: "center", operator: false },
			{ label: "ID", prop: "id", align: "center", operator: false, operatorPlaceholder: "ID", width: 70 },
			{ label: "头像", prop: "avatar", align: "center", render: "image", operator: false },
			{ label: "昵称", prop: "nickname", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "用户名", prop: "username", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "姓名", prop: "name", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "手机号", prop: "mobile", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "角色组", prop: "group_name", render: "tag", align: "center", operator: false },

			{
				label: "最后登录时间",
				prop: "last_login_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},
			{
				label: "注册时间",
				prop: "create_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},

			{
				label: "状态 启用/禁用",
				prop: "status",
				align: "center",
				width: 120,
				render: "switch",
				operator: "=",
				replaceValue: { "0": "禁用", "1": "启用" }
			},

			{
				label: "操作",
				align: "center",
				width: "100",
				render: "buttons",
				buttons: optButtons,
				operator: false
			}
		],
		dblClickNotEditColumn: [undefined, "status"]
	},
	{
		defaultItems: {
			status: "1"
		}
	}
)

provide("baTable", baTable)

baTable.mount()
baTable.getIndex()

const select = ref()

</script>

<style scoped lang="scss"></style>
